<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格</title>
</head>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="ElementUI/index.css">
<script src="ElementUI/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="ElementUI/index.js"></script>

<body>
<div id="app">
  <el-table :data="tableData" stripe>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" align="center">
      <!--slot-scope：作用域插槽，可以获取表格数据
         scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
      -->
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</div>
</body>
</html>
<script>
  new Vue({
    el: '#app',
    data: {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    },
    methods: {
      handleDelete(row) {
        alert(row.date);
      },
      handleUpdate(row) {
        alert(row.name);
      }
    }
  });
</script>